<script setup lang="ts">
import { ref, watch } from "vue"
import Service from "../../mock/Service"
import Photo from "./Photo.vue"
import Projects from "./Projects.vue"
import Tag from "./tag.vue"
import Introduction from "./introduction.vue"

const props = defineProps<{ id: string }>()
let profile = ref({} as Profile)

watch(props, () => {
  profile.value = {} as Profile
  init()
})

function init(): void {
  if (props.id.length == 0) return

  Service.getProfile(props.id).then((_profile) => {
    if (_profile == undefined) return
    profile.value = _profile
  })
}
init()

</script>
<template>
  <!-- FIXME：根据设计图进行样式优化 张燕龙 康露露 9.9 -->
  <div class="body" v-if="profile.name">
    <section class="photo">
      <Photo :id="id"></Photo>
      <Introduction :data="profile"></Introduction>
    </section>
    <section class="aligning" v-if="profile.profession">
      <h3>专业技能</h3>
      <Tag :key="index" v-for="(tag, index) in profile.profession.tags" :tag="tag"></Tag>
      <section>
        <ul>
          <li v-for="skill in profile.profession.skills">{{ skill }}</li>
        </ul>
      </section>
    </section>
    <br />
    <section class="aligning" v-if="profile.projects && profile.projects.length > 0">
      <h3>项目经验</h3>
      <div>
        <Projects :data="profile.projects"></Projects>
      </div>
    </section>
  </div>
  <div class="loading" v-if="!profile.name">
    <section class="photo"></section>
  </div>
</template>
<style scoped>
.content {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 35px;
}

.loading {
  background-color: white;
  display: block;
}

.loading .photo {
  background-color: lightgray;
  width: 100%;
  height: 380px;
}
.profile {
  width: 80%;
  /* background: white; */
  padding: 16px;
  /* border: solid 1px gray; */
}
section > h3 {
  color: #01a0fc;
  border-bottom: solid 1px lightgray;
  margin: 15px -3px;
}
* {
  margin: 0;
  padding: 0;
}
.body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: auto;
  margin: 0px;
}
.aligning {
  padding: 0 24px;
}
ul {
  list-style: inside;
}
</style>
